<template>
  <section>
    <el-input size="mini" placeholder="请输入关键字" clearable v-model="searchKey"
              @keydown.native.prevent.enter="searchBtn" style="width: 30%"></el-input>
    <el-row v-if="warehouseList">
      <el-tabs :value="warehousePage" >
        <div v-for="warehouse in warehouseList" :key="warehouse.id">
          <el-tab-pane :label="warehouse.name" :name="warehouse.name">
            <el-row>
              <el-table :data='stockList' v-if="stockList">
                <el-table-column type="index"></el-table-column>
                <!--<el-table-column label="所属商品">-->
                  <!--<template slot-scope="scope">-->
                    <!--<el-input v-if="scope.row.edit" size="mini" v-model="scope.row.data.goodsName"></el-input>-->
                    <!--<div v-show="!scope.row.edit">{{scope.row.data.goodsName}}</div>-->
                  <!--</template>-->
                <!--</el-table-column>-->
                <el-table-column label="名称">
                  <template slot-scope="scope">
                    <el-input v-if="scope.row.edit" size="mini" v-model="scope.row.title"></el-input>
                    <div v-show="!scope.row.edit">{{scope.row.title}}</div>
                  </template>
                </el-table-column>
                <el-table-column label="编码">
                  <template slot-scope="scope">
                    <el-input v-if="scope.row.edit" size="mini" v-model="scope.row.sn"></el-input>
                    <div v-show="!scope.row.edit">{{scope.row.sn}}</div>
                  </template>
                </el-table-column>
                <el-table-column label="总库存">
                  <template slot-scope="scope">
                    <el-input v-if="scope.row.edit" size="mini" v-model="scope.row.totalStock"></el-input>
                    <div v-show="!scope.row.edit">{{scope.row.totalStock}}</div>
                  </template>
                </el-table-column>
                <el-table-column label="余量">
                  <template slot-scope="scope">
                    <el-input v-if="scope.row.edit" size="mini" v-model="scope.row.virtualStock"></el-input>
                    <div v-show="!scope.row.edit">{{scope.row.virtualStock}}</div>
                  </template>
                </el-table-column>
                <el-table-column label="单位" width="100px">
                  <template slot-scope="scope">
                    <el-input v-if="scope.row.edit" size="mini" v-model="scope.row.unit"></el-input>
                    <div v-show="!scope.row.edit">{{scope.row.unit}}</div>
                  </template>
                </el-table-column>
                <el-table-column label="近期更新" width="100px" prop="updated" :formatter="formatDate">
                </el-table-column>
                <el-table-column label="操作" width="255">
                  <template slot-scope="scope">
                    <el-button  @click='historyList(scope)' size="mini" type="primary">历史明细</el-button>
                    <el-button  @click='del(scope)' size="mini" type="danger">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-row>
            <el-pagination v-show="totalPage>0" style="margin-top:20px;"
                           background
                           layout="prev, pager, next"
                           :page-count="totalPage"
                           @current-change="goPage">
            </el-pagination>
          </el-tab-pane>
        </div>
      </el-tabs>
    </el-row>
  </section>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import DateFormat from '@/common/date-formater'
  import schedule from "../../sdk/api/schedule"
  import department from "../../sdk/api/department"
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler'
  export default {
    name: "OutInbound",
    data() {
      return {
        warehouseList:null,
        warehousePage:null,
        stockList:[],
        searchKey:null,
        totalPage:0,
      }
    },
    created(){
      //加载仓库列表
      this.getWarehouseList()
    },
    computed:{
    },
    watch:{
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      goPage(val){
        this.getStockList(val-1)
      },
      searchBtn(){
        this.getStockList('',this.searchKey)
      },
      formatDate(row, column, cellValue, index){
        return DateFormat.format(cellValue)
      },
      historyList(scope){
        console.log(scope)
      },
      getWarehouseList(){
        this.fetch({name:"getWarehouseList"})
          .then(res=>{
            this.warehouseList = res
            this.warehousePage = res[0].name
            this.getStockList()
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getStockList(pageNo,key){
        this.fetch({name:"getStockList",data:{page:pageNo?pageNo:0,key:key?key:''}})
          .then(res=>{
            console.log(res)
            this.stockList = res.content
            this.totalPage=res.totalPages
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      del(scope){
        console.log(scope)
        this.fetch({name:"deleteStock",data:{sn:scope.row.sn,id:scope.row.id}})
          .then(res=>{
            console.log(res)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      }
    }
  }
</script>

<style scoped>

</style>
